<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>刘旻余的主页</title>
    </head>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .all {
            width: 100%;
            max-width: 100vw;
            display: flex;
            height: 100vh;
            background-position: (300px, 0px);
            background-repeat: no-repeat;
        }
        ul {
            /*左边导航栏*/
            width: 355px;
            min-width: 300px;
            height: 100vh;
            color: #fff;
            background-color: #000;
            line-height: 50px;
            text-align: center;
            font-size: 22px;
        }
        li {
            height: 50px;
            cursor: pointer;
        }
        .content {
            width: 100%;
            height: 100vh;
            position: relative;
            margin: auto;
        }
        .last {
            position: absolute;
            width: 1100px;
            height: 650px;
            display: flex;
            justify-content: center;
            align-items: center;
            top: 10vw;
            left: 20vw;
        }
        a {
            text-decoration: none;
            width: 300px;
            color: #000;
            font-size: 35px;
            z-index: 1;
        }
        .js1,.dom,.bom,.js2 ,.vue{
            /*阶段*/
            position: absolute;
            width: 70vw;
            height: 90vh;
            opacity: 0;
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;
            top: 0;
            left: 5vw;
        }
        /*可操作的类名*/
        .li-active {
            color: #000;
            background-color: #fff;
        }
    </style>
    <body>
        <div class="all">
            <ul>
                <li>最近一次上交的index</li>
                <li>js初级</li>
                <li>DOM</li>
                <li>BOM</li>
                <li>js高阶</li>
                <li>vue</li>
            </ul>
            <div class="content">
                <div class="last"></div>
                <div class="js1">
                    <a href="./work/9月/9.18/index.html">9.18数据类型</a>
                    <a href="./work/9月/9.20/index.html">9.20运算符</a>
                    <a href="./work/9月/9.21/index.html">9.21流程控制</a>
                    <a href="./work/9月/9.22/index.html">9.22函数</a>
                    <a href="./work/9月/9.25/index.html">9.25预编译</a>
                    <a href="./work/9月/9.26/index.html">9.26数组</a>
                    <a href="./work/9月/9.27/index.html">9.27遍历</a>
                    <a href="./work/10月/10.8/index.html">10.8字符串</a>
                    <a href="./work/10月/10.10/index.html">10.10系统对象</a>
                    <a href="./work/10月/10.12/index.html">10.12js初级测试</a>
                </div>
                <div class="dom">
                    <a href="./work/10月/10.13/index.html">10.13选项卡</a>
                    <a href="./work/10月/10.16/find.html">10.16动态生成表格</a>
                    <a href="./work/10月/10.16/index.html">10.16操作节点</a>
                    <a href="./work/10月/10.17/index.html">10.17小米导航栏</a>
                    <a href="./work/10月/10.18/index.html">10.18轮播图</a>
                    <a href="./work/10月/10.19/index.html"
                        >10.19无缝轮播图</a
                    >
                    <a href="./work/10月/10.20/index.html">10.20分页渲染</a>
                    <a href="./work/10月/10.23/index.html">10.23抽取名单</a>
                </div>
                <div class="bom">
                    <a href="./work/10月/10.25/index.html">10.25触底加载</a>
                    <a href="./work/10月/10.26/index.html">10.26放大镜</a>
                    <a href="./work/10月/10.27/index.html"
                        >10.27天空之城首页布局</a
                    >
                    <a href="./work/10月/10.30/index.html"
                        >10.30动态渲染轮播图</a
                    >
                </div>
                <div class="js2">
                    <a href="./work/11月/1114/index.html">11.14练习</a>
                    <a href="./work/11月/1117/index.html">11.17红绿灯</a>
                    <a href="./work/11月/1120/index.html">11.20面向对象轮播图</a>
                    <a href="./work/11月/1130/dist/html/index.html">11.30天空之城压缩</a>
                </div>
                <div class="vue">
                    <a href="./work/12月/12.5/index.html">12.5选项卡</a>
                    <a href="./work/12月/12.7/index.html">12.7评论</a>
                </div>
            </div>
        </div>
    </body>
</html>
